import React,  { Component } from 'react';
import axios from 'axios';
import cookie from 'react-cookies';
import MenuHead from '../comm/menuHead';
import Table from '../comm/table';
import TheDate from '../comm/theDate';
import LunarDate from '../comm/lunarDate';
import '../comm/comm.css';
import { getCurStrDate, isInt } from '../comm/fn';

class DateRemind extends Component {
    state = {
        cur_tab: "remind",
        date_rcd_head: [
            {en: "date", ch: "日期"},
            {en: "type", ch: "类型"},
            {en: "description", ch: "描述"},
            {en: "front", ch: "提前"},
            {en: "back", ch: "往后"},
            {en: "frequency", ch: "频率"},
        ],
        date_rcd_data: [],
        date_rcd_count: 0,
        remind_rcrd_id: "",
        date_remind_head: [
            {en: "prompt", ch: "提醒"},
            {en: "date", ch: "日期"},
            {en: "type", ch: "类型"},
            {en: "description", ch: "描述"},
            {en: "front", ch: "提前"},
            {en: "back", ch: "往后"},
            {en: "frequency", ch: "频率"},
        ],
        date_remind_data: [],
        date_remind_count: 0,
        remind_date_type_list: ["阳历", "阴历"],
        remind_date_type: "阳历",
        remind_frequency_list: ["每年", "每月"],
        remind_frequency: "每年",
        calendar: "",
        lunar: {},
        remind_description: "",
        remind_front: "",
        remind_back: "",
        remind_input_read_only: false,
    }

    switchTab = (id) => {
        this.setState({
            cur_tab: id,
        })
    }

    query_date_record = () => {
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        axios.post("/app/queryRemindDate", {
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.error) {
                this.props.history.push('/login');
            } else if("" !== res.data.error) {
                console.log(res.data.error)
            }
            let r_data = null === res.data.data ? [] : res.data.data
            this.setState({
                date_rcd_data: r_data,
                date_rcd_count: res.data.count,
            })
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }

    batch_date_record = (date_list) => {
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        axios.post("/app/delRemindDate", {
            "record": date_list,
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.error) {
                this.props.history.push('/login');
            } else if("" !== res.data.error) {
                console.log(res.data.error)
            } else {
                this.query_date_remind()
                this.query_date_record()
                this.setState({
                    cur_tab: "query",
                })
            }
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }

    modify_date_record = (record) => {
        let calendar = ""
        let lunar = {
            "year": 0,
            "month": 0,
            "day": 0,
        }
        if("阳历" === record.type) {
            calendar = record.date
        } else if("阴历" === record.type) {
            let lunar_arr = record.date.split("-")
            lunar = {
                "year": lunar_arr[0],
                "month": lunar_arr[1],
                "day": lunar_arr[2],
            }
        }
        this.setState({
            remind_rcrd_id: record.id,
            remind_date_type: record.type,
            calendar: calendar,
            lunar: lunar,
            remind_description: record.description,
            remind_front: parseInt(record.front),
            remind_back: parseInt(record.back),
            remind_frequency: record.frequency,
            cur_tab: "input",
            remind_input_read_only: true,
        })
    }

    edit_remind_input = () => {
        this.setState({
            remind_input_read_only: false
        })
    }

    query_date_remind = () => {
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        axios.post("/app/dateRemind", {
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.error) {
                this.props.history.push('/login');
            } else if("" !== res.data.error) {
                console.log(res.data.error)
            }
            let r_data = null === res.data.data ? [] : res.data.data
            this.setState({
                date_remind_data: r_data,
                date_remind_count: r_data.length,
            })
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }

    remind_frequency_change = (e) => {
        this.setState({
            remind_frequency: e.target.value
        })
    }

    remind_date_type_change = (e) => {
        this.setState({
            remind_date_type: e.target.value
        })
    }

    setCalendar = (date) => {
        this.setState({
            calendar: date
        })
    }

    setLunar = (year, month, day) => {
        this.setState({
            lunar: {
                "year": year,
                "month": month,
                "day": day,
            }
        })
    }

    set_remind_description = (e) => {
        this.setState({
            remind_description: e.target.value
        })
    }

    set_remind_front = (e) => {
        let front = e.target.value
        if("" === front) {
            this.setState({
                remind_front: ""
            })
            return
        }
        if(isInt(front)) {
            this.setState({
                remind_front: parseInt(front)
            })
        } else {
            alert("请输入正整数")
            this.setState({
                remind_front: ""
            })
        }
    }

    set_remind_back = (e) => {
        let back = e.target.value
        if("" === back) {
            this.setState({
                remind_back: ""
            })
            return
        }
        if(isInt(back)) {
            this.setState({
                remind_back: parseInt(back)
            })
        } else {
            alert("请输入正整数")
            this.setState({
                remind_back: ""
            })
        }
    }

    check_remind_data = () => {
        if("阳历" === this.state.remind_date_type) {
            if("" === this.state.calendar) {
                alert("日期不能为空")
                return false
            }
        } else if("阴历" === this.state.remind_date_type) {
            if({} === this.state.lunar || (0 === this.state.lunar.year && 0 === this.state.lunar.month && 0 === this.state.lunar.day)) {
                alert("日期不能为空")
                return false
            }
        }
        if("" === this.state.remind_description) {
            alert("描述不能为空")
            return false
        }
        if("" === this.state.remind_front) {
            alert("提前不不能为空")
            return false
        }
        if("" === this.state.remind_back) {
            alert("往后不能为空")
            return false
        }
        return true
    }

    handle_submit = (submit_type) => {
        if(true !== this.check_remind_data()) return
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        axios.post("/app/" + submit_type, {
            "id": this.state.remind_rcrd_id,
            "type": this.state.remind_date_type,
            "calendar": this.state.calendar,
            "lunar": this.state.lunar,
            "description": this.state.remind_description,
            "front": this.state.remind_front,
            "back": this.state.remind_back,
            "frequency": this.state.remind_frequency,
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.error) {
                this.props.history.push('/login');
            } else if("" !== res.data.error) {
                console.log(res.data.error)
            } else {
                this.query_date_remind()
                this.query_date_record()
                this.setState({
                    cur_tab: "query",
                })
            }
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }

    clear_remind_data = () => {
        this.setState({
            remind_rcrd_id: "",
            remind_date_type: "阳历",
            calendar: getCurStrDate(),
            remind_description: "",
            remind_front: "",
            remind_back: "",
            remind_frequency: "每年",
            remind_input_read_only: false,
        })
    }

    handle_add = () => {
        this.handle_submit("addRemindDate")
        this.clear_remind_data()
    }

    handle_modify = () => {
        this.handle_submit("modifyRemindDate")
        this.clear_remind_data()
    }

    componentDidMount() {
        this.setState({
            calendar: getCurStrDate()
        })
        this.query_date_remind()
        this.query_date_record()
    }

    render(){
        let isRemindShow = this.state.cur_tab === "remind" ? "block" : "none";
        let isInputShow = this.state.cur_tab === "input" ? "block" : "none";
        let isQueryShow = this.state.cur_tab === "query" ? "block" : "none";

        let remindStyle = this.state.cur_tab === "remind" ? "#99d9ea" : "#f7f7f7";
        let inputStyle = this.state.cur_tab === "input" ? "#99d9ea" : "#f7f7f7";
        let queryStyle = this.state.cur_tab === "query" ? "#99d9ea" : "#f7f7f7";

        return (
            <div align="center">
                <MenuHead />
                <h4>日期提醒</h4>
                <div>
                <table>
                <tbody>
                <tr>
                    <td><span style={{background: `${remindStyle}`}} onClick={() => this.switchTab("remind")}>提醒</span></td>
                    <td width='5'></td>
                    <td><span style={{background: `${inputStyle}`}} onClick={() => this.switchTab("input")}>录入</span></td>
                    <td width='5'></td>
                    <td><span style={{background: `${queryStyle}`}} onClick={() => this.switchTab("query")}>查看</span></td>
                    <td width='100'></td>
                </tr>
                </tbody>
                </table>
                </div>
                <div style={{display: `${isRemindShow}`}}>
                    <Table
                    head={this.state.date_remind_head}
                    data={this.state.date_remind_data}
                    recordCount={this.state.date_remind_count} />
                </div>
                <div style={{display: `${isInputShow}`}}>
                    <span>-----------------------------------------</span>
                    <table>
                    <tbody>
                    <tr>
                        <td>类型:</td>
                        <td>
                            {  this.state.remind_input_read_only ?
                            <input
                                    value={this.state.remind_date_type}
                                    readOnly={true} type="text" size="10" maxLength="10"></input> :
                            <select value={this.state.remind_date_type} onChange={e => this.remind_date_type_change(e)}>
                            { this.state.remind_date_type_list.map(m => {
                                return <option value={m} key={m}>{m}</option>
                            })}
                            </select>}
                        </td>
                    </tr>
                    <tr>
                        <td>日期:</td>
                        <td>{ "阴历" === this.state.remind_date_type ?
                            this.state.remind_input_read_only ?
                                <input
                                    value={this.state.lunar.year + "-" + this.state.lunar.month + "-" + this.state.lunar.day}
                                    readOnly={true} type="text" size="10" maxLength="10"></input> :
                                <LunarDate setLunar={this.setLunar} /> :
                            this.state.remind_input_read_only ?
                                <input value={this.state.calendar} readOnly={true} type="text" size="10" maxLength="10"></input> :
                                <TheDate defautlDate={this.state.calendar} setDate={this.setCalendar } />}</td>
                    </tr>
                    <tr>
                        <td>描述:</td>
                        <td><input
                            value={this.state.remind_description}
                            onChange={this.set_remind_description}
                            readOnly={this.state.remind_input_read_only}
                            type="text" size="20" maxLength="50"></input></td>
                    </tr>
                    <tr>
                        <td>提前:</td>
                        <td><input
                            value={this.state.remind_front}
                            onChange={this.set_remind_front}
                            readOnly={this.state.remind_input_read_only}
                            type="text" size="1" maxLength="3"></input></td>
                    </tr>
                    <tr>
                        <td>往后:</td>
                        <td><input
                            value={this.state.remind_back}
                            onChange={this.set_remind_back}
                            readOnly={this.state.remind_input_read_only}
                            type="text" size="1" maxLength="3"></input></td>
                    </tr>
                    <tr>
                        <td>频率:</td>
                        <td>
                            { this.state.remind_input_read_only ?
                                <input
                                    value={this.state.remind_frequency}
                                    readOnly={true} type="text" size="10" maxLength="10"></input> :
                                <select value={this.state.remind_frequency} onChange={e => this.remind_frequency_change(e)}>
                                { this.state.remind_frequency_list.map(m => {
                                    return <option value={m} key={m}>{m}</option>
                                })}
                                    </select>}
                        </td>
                    </tr>
                    </tbody>
                    </table>
                    <table>
                    <tbody>
                    <tr>
                        <td>
                            { this.state.remind_input_read_only ?
                                <button onClick={this.edit_remind_input}>编辑</button> :
                                    "" === this.state.remind_rcrd_id ?
                                        <button onClick={this.handle_add}>添加</button> :
                                        <button onClick={this.handle_modify}>确认修改</button> }
                        </td>
                        <td width='5'></td>
                    </tr>
                    </tbody>
                    </table>
                </div>
                <div style={{display: `${isQueryShow}`}}>
                    <Table
                    head={this.state.date_rcd_head}
                    data={this.state.date_rcd_data}
                    recordCount={this.state.date_rcd_count}
                    queryData={this.query_date_record}
                    deleteData={this.batch_date_record}
                    modifyData={this.modify_date_record} />
                </div>
            </div>
        )
    }
}

export default DateRemind;
